<template>
  <div class="w">
    <div class="travel_page">
      <Recommended @triggerSeach='triggerSeach' />
      <div class="bottomimg">
        <h2>推荐城市</h2>
        <Slideshow />
      </div>
    </div>
    <div class="travel_strategy">
      <!-- 搜索框开始 -->
      <div class="topinput">
        <el-input
          placeholder="请输入想去的地方，比如：'
        广州'"
          class="input-with-select"
          v-model="input"
        >
        </el-input>
        <span
          class="seach el-icon-search"
          @click="SeachPol"
        ></span>
      </div>
      <div class="tuijian">
        推荐：
        <span @click='triggerSeach("广州")'>广州</span>
        <span @click='triggerSeach("上海")'>上海</span>
        <span @click='triggerSeach("北京")'>北京</span>
      </div>
      <!-- 搜索框结束 -->
      <!-- 旅游攻略文章列表开始 -->
      <div class="travel_bottom">
        <div class="top_page">
          <h3>推荐攻略</h3>
          <div
            class="el-icon-edit travel-notes"
            @click="handleclickde"
          >写游记</div>
        </div>
        <div class="pagelist" v-if="Biglist">
          <PageList :PageLists='Biglist' />
          <div v-if="Biglist.length==0" class="no-excuse">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2809257970,769483466&fm=26&gp=0.jpg" alt="">
          </div>
        </div>
        <!-- 旅游攻略文章列表结束 -->
        <!-- 分页功能开始 -->
        <div
          class="block"
          v-if="Biglist"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentpage"
            :page-sizes="[3, 5, 7, 8]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 分页功能结束 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //搜索框
      input: "",
      // 每页的列表长度  默认3
      pagesize: 3,
      //当前页码  默认1
      currentpage: 1,
      //筛选之后的列表
      PageLists: null,
      //总列表
      Biglist: null,
      total:0,

      // 内容分页传参
      parameters:{
        _start:0,
        _limit:3
      }

    };
  },
  watch: {
    //监听路由
    $route(old) {
      // 如果路由发生变化重新获取数据
      const data = this.$route.query
          // console.log(data);
      this.getPost(data)
    },
    //监听input  如果被清空就搜索当前进入页面的数据
    input(newold) {
      if (newold == "") {
        this.parameters._start=0
        this.currentpage=1
        const data ={_start:this.parameters._start,
                      _limit:this.parameters._limit}
                      
      this.getPost(data)
      }
    },
    
  },
  //获取列表详情
  created() {
    this.input=this.$route.query.city
    this.SeachPol()
  },

  methods: {
    //点击游记判断有没有登录，没有就跳到登录页登录
    handleclickde(){
      if(this.$store.state.user.token===''){
        this.$message.success("请先登陆");
        this.$router.push('/user/login')
         const { fullPath } = this.$route;
        // 将url 设置进  vuex中
        this.$store.commit("page/setSourceURL", fullPath)
      }else{
        this.$router.push('/post/addpost')
      }
    },

    //每页长度val
    handleSizeChange(val) {
      this.pagesize = val;
      this.parameters._limit=this.pagesize  
      
      const city=this.input
      // 每次选择每页长度，跳转到第一页而且start为0
      this.parameters._start=0
      this.currentpage=1
      // 判断有没有city值
      if(!city){
        const data ={_start:this.parameters._start,
                      _limit:this.parameters._limit}
                      
      this.getPost(data)
      }else{
          const data ={city: this.input,_start:this.parameters._start,
                      _limit:this.parameters._limit}
      this.getPost(data)
      }
    },
    //当前页面
    handleCurrentChange(val) {
      this.currentpage = val;
      this.parameters._limit=this.pagesize
      this.parameters._start=(val-1)*this.pagesize
      // 判断有没有city值
      const city=this.input
      if(!city){
        const data ={_start:this.parameters._start,
                      _limit:this.parameters._limit}
      this.getPost(data)
      }else{
          const data ={city: this.input,_start:this.parameters._start,
                      _limit:this.parameters._limit}
      this.getPost(data)
      }
      
               
    },
   
    //点击搜索
    SeachPol() {
      this.$router.push({
        path: "/post",
        query: {
          city: this.input,
          _start:0,
          _limit:this.parameters._limit
        },
        
        })
        // 每次搜索不一样的城市时，跳转到第一页
        this.currentpage=1
          
    },
    //点击其他相关按钮  触发搜索
    triggerSeach(val) {
      // console.log(val);
      this.input = val;
      this.SeachPol();
      
    },
    // 封装文章数据请求
    async getPost(requestData){
      const token = this.$store.state.user.token
      const res = await this.$axios.get('/posts',{params:requestData},
      {headers:{Authorization:"Bearer "+ token}
      })
          // console.log(res);
          // 获取数据渲染到PageList组件中
          this.Biglist=res.data.data
          this.total=res.data.total
          this.$router.push({
          path: "/post",
          query: requestData,
        
        })
    }

  },
};
</script>

<style lang="less" scoped>
.w {
  width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .travel_page {
    width: 260px;
    h2 {
      font-size: 16px;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      font-weight: normal;
      margin-bottom: 20px;
    }
    img {
      width: 260px;
    }
  }
  .travel_strategy {
    flex: 1;
    padding-left: 40px;
    position: relative;
    .seach {
      position: absolute;
      top: 0;
      right: 0;
      padding: 9px 20px;
      font-size: 24px;
      color: orange;
      font-weight: 700;
      cursor: pointer;
    }
    .topinput {
      border: 4px solid #ffa500;
      /deep/.el-input__inner {
        padding-top: 7px;
        height: 30px;
        border: none;
        color: #333;
      }
      .input-with-select {
        height: 34px;
      }
    }
    .tuijian {
      padding: 10px 0;
      font-size: 12px;
      color: #666;
      span {
        padding: 3px;
        cursor: pointer;
        &:hover {
          color: orange;
          text-decoration: underline;
        }
      }
    }
    .travel_bottom {
      .top_page {
        height: 55px;
        display: flex;
        justify-content: space-between;
        h3 {
          height: 50px;
          line-height: 40px;
          border-bottom: 2px solid orange;
          font-weight: 400;
          font-size: 18px;
          background-image: linear-gradient(to bottom right,rgb(12, 119, 161),rgb(247, 68, 98));
          -webkit-background-clip: text;
          color: transparent;
        }
        .travel-notes {
          height: 40px;
          color: #fff;
          background-color:#409eff; 
          transition: 0.1s;
          font-weight: 500;
          padding: 12px 20px;
          font-size: 14px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
      }
      .pagelist {
        border-top: 1px solid #ccc;
        padding-top: 20px;

        .no-excuse{
          text-align: center;
        }
      }
    }
  }
  // 分页组件
  .block {
    display: flex;
    justify-content: center;
    padding: 10px 0 20px;
  }
}
</style>